<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询dom的api</title>
    <style>
        .hidden-demo,
        .killme-action {
            width: 100px;
            height: 100px;
            background: red;
        }

        .mt10 {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="app">
            <div class="counter"></div>
        </div>
        <div class="add">
            <button class="increment">+</button>
        </div>
        <div class="sub">
            <button class="decrenment">-</button>
        </div>
    </div>
    <div>
        <button class="front" action="before">向前</button>
        <button class="back" action="after">向后</button>
        <button class="child-first" action="prepend">向子元素第一个</button>
        <button class="child-last" action="append">向子元素最后一个</button>
    </div>
    <div class="hidden-action">
        <button class="togger-hidden">
            切换显示
        </button>
        <div class="hidden-demo mt10"></div>
    </div>
    <div class="killme-action"></div>
    <script>
        var boxEl = document.querySelector('.box')
        var appEl = document.getElementsByClassName('app')[0]
        var counterEl = appEl.firstElementChild
        var increment = counterEl.parentElement.nextElementSibling.children[0]
        var decrement = increment.parentElement.nextElementSibling.querySelector('button')
        var counter = 0
        increment.onclick = function () {
            counterEl.textContent = ++counter
        }
        decrement.onclick = function () {
            counterEl.textContent = --counter
        }
        var controlBoxEl = document.body.firstElementChild.nextElementSibling
        controlBoxEl.onclick = function () {
            var app = appEl.cloneNode(true)
            this.append(app)
        }
        for (const btn of controlBoxEl.children) {
            btn.onclick = function () {
                var action = this.getAttribute('action')
                var newEl = document.createElement('h2')
                newEl.textContent = action
                // this.insertAdjacentElement("")
                this[action](newEl)
            }
        }

        var hiddenToggerEl = document.querySelector('.togger-hidden')
        var demo = hiddenToggerEl.nextElementSibling
        hiddenToggerEl.onclick = function () {
            // 由于 getattribute 只能返回字符串 就尼玛日狗 不过!! 能解决 无所谓
            // console.log(demo.getAttribute('hidden'));
            // console.log(!demo.getAttribute('hidden'));
            demo.hidden = !demo.hidden
            demo.classList.toggle('mt10')
            // demo.setAttribute('hidden', !demo.getAttribute('hidden'))
        }

        var cloneEl = null
        var killMeEl = document.querySelector('.killme-action')
        killMeEl.onclick = function () {
            cloneEl = this.cloneNode(true)
            this.remove()
            setTimeout(() => {
                cloneEl.onclick = arguments.callee// 嘿嘿嘿
                document.body.append(cloneEl)
            }, 1000);
        }
    </script>
</body>

</html>